<template>
	<!-- 协议弹出框 -->
	<view class="pop" @touchmove.stop.prevent="">
		<view class="pop-mask" @tap="hidePop"></view>
		<!-- 内容块 -->
		<!-- 显示分销二维码 -->
		<view v-if="openRouter=='qrcode'" class="pop-qrcode">
			<image :src="qrcodeImg" mode=""></image>
		</view>
		<!-- 充值 -->
		<view v-if="openRouter=='rechange'" class="rechange-main">
			<view class="rechange-title">给{{popData.name}}充值</view>
			<input type="number" v-model="number" placeholder="请输入"/>
			<view class="rechangButtom" @tap="rechangeNow">立即充值</view>
		</view>
		<!-- 回收协议 -->
		<view class="pop-main" v-if="openRouter=='protocol'">
			<view class="pop-box">
				<rich-text :nodes="popContent"></rich-text>
			</view>
			<view @tap="hidePop" class="icon iconfont icon-xianshi_quxiao"></view>
		</view>
	</view>
</template>

<script>
import util from './commen/api/util'
	export default {
		props: {
			openRouter: String,
			qrcodeImg: String,
			popData: Object, //点击充值传递过来的选择的用户数据
			popEvent:String,//协议内容
		},
		data() {
			return {
				animationData: {},
				number:"",//充值数额
				popContent:"",
			}
		},
		watch:{
			popEvent(newValue){
				console.log("新的值",newValue)
				this.popContent = newValue
			}
		},
		mounted(){
			// console.log("点击进来显示：",this.popEvent)
			
		},
		methods: {
			hidePop() { //点击关闭遮罩层
				this.$emit("changeData", false)
			},
			rechangeNow(){//点击立即充值
				if(this.number==""){
					return uni.showToast({
						title:"请输入充值数额",
					})
				}
				var params={
					do: "admin",
					op: "recharge",
					type: this.popData.type,
					id: this.popData.id,//用户id
					money: this.number//充值数额
				}
				util.requestWithSign(params).then(res=>{
					console.log("充值结果：",res)
					uni.showToast({
						title:res.message,
						icon:"none"
					})
					this.hidePop()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;

		.pop-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
		}

		.pop-qrcode {
			position: absolute;
			left: 15%;
			top: 25%;
			width: 500rpx;
			height: 500rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
		}

		.rechange-main {
			width: 80%;
			background: #fff;
			border-radius: 20rpx;
			position: absolute;
			top: 40%;
			left: 10%;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			.rechange-title{
				text-align: center;
				font-weight: bold;
			}
			input{
				width: 100%;
				background: #f6f6f6;
				// padding: 30rpx 0;
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				margin-top: 40rpx;
			}
			.rechangButtom{
				background: #0bb388;
				width: 100%;
				border-radius: 20rpx;
				color: #fff;
				margin-top: 40rpx;
				text-align: center;
				padding: 20rpx 0;
				box-sizing: border-box;
			}
		}

		.pop-main {
			width: 80%;
			position: absolute;
			left: 10%;
			top: 15%;

			.pop-box {
				width: 100%;
				border-radius: 10rpx;
				height: 700rpx;
				overflow-y: scroll;
				padding: 20rpx;
				box-sizing: border-box;
				background: #fff;
			}

			.icon-xianshi_quxiao {
				//取消
				width: 150rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 75rpx;
				// border: 1px solid #f00;
				margin-top: 20rpx;
			}
		}

	}
</style>